<!-- 通过小区查询关联的管理人员 -->
<template>
	<div class="app-container">
		<el-row :gutter="30">
			<el-col :span="12">
				<el-row>
					<span>小区</span>
					<div class="flex1"></div>
					<el-space>
						<template v-if="orgId == 100">
							<el-tree-select
								v-if="props.deptData"
								v-model="data.queryParams.deptId"
								:data="props.deptData[0].children"
								:props="{
									label: 'deptName',
									value: 'deptId',
									children: 'children',
								}"
								:render-after-expand="false"
								:clearable="true"
								style="width: 150px"
								@change="getCommuityList()"
							/>
						</template>
						<el-input v-model="data.queryParams.keyWord" clearable size="default" placeholder="入小区名、小区地址" />
						<el-button @click="getCommuityList()" type="primary" size="default"> 查询 </el-button>
					</el-space>
				</el-row>
				<br />
				<el-table
					:data="data.communityTableData.list"
					:border="true"
					max-height="calc(100vh - 290px)"
					@row-click="userRowClick"
					highlight-current-row
				>
					<el-table-column label="#" type="index" width="80" :reserve-selection="true" />
					<el-table-column label="组织" prop="deptId" width="150">
						<template #default="{ row }">
							<span>{{ props.deptMap[row.deptId] }}</span>
						</template>
					</el-table-column>
					<el-table-column label="小区" prop="name" />
					<el-table-column label="地址" prop="address" />
				</el-table>
				<!-- 分页 -->
				<pagination
					v-show="data.communityTableData.total > 0"
					:total="data.communityTableData.total"
					v-model:page="data.queryParams.pageNum"
					v-model:limit="data.queryParams.pageSize"
					layout="total, prev, pager, next"
					@pagination="getCommuityList"
				/>
			</el-col>

			<!-- right -->
			<el-col :span="12">
				<el-row>
					<span v-if="!data.curRow">请选择小区</span>
					<span v-else>【{{ data.curRow.name }}】的管理人员</span>
					<div class="flex1"></div>
				</el-row>
				<br />
				<el-table :data="data.userList" :border="true" max-height="calc(100vh - 290px)">
					<el-table-column label="#" type="index" :reserve-selection="true" />
					<el-table-column label="组织" prop="deptId" width="150">
						<template #default="{ row }">
							<span>{{ props.deptMap[row.deptId] }}</span>
						</template>
					</el-table-column>
					<el-table-column label="账号" prop="userName" />
					<el-table-column label="昵称" prop="userNickname" />
					<el-table-column label="电话" prop="mobile">
						<template #default="{ row }">
							<div style="display: flex; align-items: center">
								{{ row.mobile || '---' }}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="状态" width="85">
						<template #default="{ row }">
							<el-tag type="success" v-if="row.manageStatus == 1">启用</el-tag>
							<el-tag type="info" v-else>禁用</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" column-key="operation" fixed="right" width="145">
						<template #default="{ row }">
							<el-button @click="singleDelete(row)" type="danger" bg size="small"> 解除 </el-button>

							<el-button v-if="row.manageStatus == 2" @click="changeManageStatus(row, 1)" type="success" bg size="small"> 启用 </el-button>
							<el-button v-if="row.manageStatus == 1" @click="changeManageStatus(row, 2)" type="warning" bg size="small"> 禁用 </el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts" setup name="alarm-handled">
import { reactive, onMounted, ref, onActivated, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useSmoke } from '/@/hook/index';
import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';
import communityApi from '/@/api/smoke/community';
import alarmManageApi from '/@/api/smoke/alarmManage';
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
const noData = ['其他', '安装人员'];
const orgId = ref(userInfos.value.deptId);
// props
const props = defineProps({
	curTab: {
		type: String,
		default: '',
	},
	deptData: {
		type: <any>Array,
		default: () => {
			return [];
		},
	},
	deptMap: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
const data = reactive({
	userList: <any>[],
	communityTableData: {
		list: <any>[],
		total: 0,
	},
	queryParams: {
		keyWord: '',
		deptId: '',
		pageNum: 1,
		pageSize: 10,
	},

	selection: [],
	curRow: <any>{},
});

// 此操作是为了更新在first 下的操作，再tab切换回来不会自动刷新问题，概率不大，
watch(
	() => props.curTab,
	(newValue: any) => {
		if (newValue == 'second') {
			if (data.curRow) {
				getUser();
			}
		}
	}
);

//
onMounted(() => {
	getCommuityList();
});

// 小区行点击
function userRowClick(row: any) {
	data.curRow = row;
	getUser();
}

// 小区list
function getCommuityList(data1 = { page: 1, size: 10 }) {
	data.curRow = null;
	data.queryParams.pageNum = data1.page;
	communityApi.getCommunityList(data.queryParams).then((res: any) => {
		data.communityTableData = res.data;
	});
}

//
function getUser() {
	let submitData = {
		communityId: data.curRow.id,
	};
	alarmManageApi.GetUserByCommunityId(submitData).then((res: any) => {
		data.userList = res.data.list;
	});
}

function changeManageStatus(row: any, manageStatus: number) {
	let updateData = {
		id: row.id,
		manageStatus,
	};

	alarmManageApi.alarmUserUpdate(updateData).then((res: any) => {
		getUser();
	});
}

// 解除当前用户与本小区的绑定
function singleDelete(row: any) {
	let params = { id: row.id };
	ElMessageBox.confirm('是否解除当前用户与本小区的绑定?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			alarmManageApi.alarmUserDelete(params).then((res: any) => {
				ElMessage.success('操作成功');
				getUser();
			});
		})
		.catch(() => {
			ElMessage.info('已取消操作');
		});
}

// function onOrgSelect(orgData: any) {
// 	data.queryParams.subOrgId = orgData.dept.id;
// 	data.queryParams.ids = [orgData.dept.id];
// 	getCommuityList();
// }
</script>
